<template>
	<div>
		<div>
			<el-form :inline="true" :model="tPurchaseList" class="demo-form-inline">
				<div> <el-form-item label="入库单据">
						<el-input v-model="tPurchaseList.purchaseNumber" placeholder="入库单据"></el-input>
					</el-form-item>
					<el-form-item label="供应商">
						<el-select v-model="tPurchaseList.supplierId" placeholder="请选择">
							<el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
				
					<el-form-item label="是否付款">
						<el-select v-model="tPurchaseList.state" placeholder="请选择">
							<el-option v-for="item in states" :key="item.id" :label="item.name" :value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="日期">
						<el-date-picker v-model="tPurchaseList.purchaseDate" type="date" placeholder="选择日期" value-format="yyyy-MM-dd">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="querytPurchaseList()">搜索</el-button>
					</el-form-item>
				</div>
			</el-form>
			<el-divider></el-divider>
			<el-table :data="tPurchaseListData" height="300" highlight-current-row
				@current-change="handleCurrentChange">
				<el-table-column fixed prop="id" label="序号" width="200" align="center">
				</el-table-column>
				<el-table-column fixed prop="purchaseNumber" label="进货单号" width="200" align="center">
				</el-table-column>
				<el-table-column fixed prop="purchaseDate" label="进货日期" width="200" align="center">
				</el-table-column>
				<el-table-column prop="supplierId" label="供应商" width="200" align="center">
				</el-table-column>
				<el-table-column prop="amountPayable" label="进货金额" width="200" align="center">
				</el-table-column>
				<el-table-column prop="userId" label="操作员" width="200" align="center">
				</el-table-column>
				<el-table-column prop="remarks" label="备注" width="200" align="center">
				</el-table-column>
			</el-table>

			<el-divider></el-divider>
			<el-table :data="DataPurchaseListGoods" height="500">
				<el-table-column fixed prop="code" label="商品编码" width="170" align="center">
				</el-table-column>
				<el-table-column fixed prop="name" label="商品名称" width="170" align="center">
				</el-table-column>
				<el-table-column prop="model" label="型号" width="170" align="center">
				</el-table-column>
				<el-table-column prop="price" label="单价" width="170" align="center">
				</el-table-column>
				<el-table-column prop="num" label="数量" width="170" align="center">
				</el-table-column>
				<el-table-column prop="unit" label="单位" width="170" align="center">
				</el-table-column>
				<el-table-column prop="total" label="总金额" width="170" align="center">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	import {
		putRequest
	} from '@/utils/api';
	export default {
		data() {
			return {
				DataPurchaseListGoods: [],
				tPurchaseListData: [],
				tPurchaseList: {
					purchaseNumber: '',
					supplierId: '',
					state: '',
					purchaseDate: '',
				},
				tPurchaseListGetId: {
					id: ''
				},
				options: [],
				states: [{
						id: "1",
						name: "已付"
					},
					{
						id: "0",
						name: "未付"
					},
					{
						id: null,
						name: "全部"
					}
				],
			}
		},
		mounted() {
			this.queryAll();
		},
		methods: {

			queryAll() {
				this.$postRequest("/tPurchase/queryAll").then(res => {
					this.tPurchaseListData = res.data.tPurchaseLists;
				});
				this.$postRequest("/tPurchase/makeSheet").then(res => {
					this.options = res.data.gys;
				})
			},
			querytPurchaseList() {
				this.$postRequest("/tPurchase/queryTPurchaseList", this.tPurchaseList).then(res => {
					this.tPurchaseListData = res.data.tPurchaseLists;
				})
			},
			querytPurchaseListGoods() {
				this.$postRequest("/tPurchase/queryTPurchaseListGoodsByTPurchaseListId/" + this.tPurchaseListGetId.id)
					.then(res => {
						this.DataPurchaseListGoods = res.data.tPurchaseListGoods;
					})
			},
			handleCurrentChange(val) {
				this.tPurchaseListGetId = val;
				this.querytPurchaseListGoods();
			},
		}
	}
</script>

<style>
</style>